<template>
	<el-container>
		<el-aside width="200px">
			<el-menu background-color="#304156" text-color="#bbcbd9" default-active="welcome"
				class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" unique-opened router>
				<el-menu-item index="welcome">
					<el-icon><icon-menu /></el-icon>
					<span>网站主页</span>
				</el-menu-item>
				<el-sub-menu index="1">
					<template #title>
						<el-icon><LocationFilled /></el-icon>
						<span>系统管理</span>
					</template>
					<el-menu-item index="User">
						<el-icon><OfficeBuilding /></el-icon>
						用户管理</el-menu-item>
					<el-menu-item index="Role">
						<el-icon><ShoppingCart /></el-icon>
						角色管理</el-menu-item>
					<el-menu-item index="Menu">
						<el-icon><MessageBox /></el-icon>
						菜单管理</el-menu-item>
					<el-menu-item index="Company">
						<el-icon><List /></el-icon>
						公司管理</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="2">
					<template #title>
						<el-icon><List /></el-icon>
						<span>课程管理</span>
					</template>
					<el-menu-item index="Classification">
						<el-icon><Flag /></el-icon>
						分类管理</el-menu-item>
					<el-menu-item index="Courseinformation">
						<el-icon><Management /></el-icon>
						课程管理</el-menu-item>
					<el-menu-item index="Video">
						<el-icon><VideoCameraFilled /></el-icon>
						视频管理</el-menu-item>
					<el-menu-item index="Evaluation">
						<el-icon><List /></el-icon>
						评价管理</el-menu-item>
					<el-menu-item index="Order">
						<el-icon><GoodsFilled /></el-icon>
						订单管理</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="3">
					<template #title>
						<el-icon><LocationFilled /></el-icon>
						<span>咨询师管理</span>
					</template>
					<el-menu-item index="CounselorInfo">
						<el-icon><Phone /></el-icon>
						<span>咨询师管理</span>
						</el-menu-item>
					<el-menu-item index="LevelInfo">
						<el-icon><List /></el-icon>
						等级管理</el-menu-item>
					<el-menu-item index="Advantage">
						<el-icon><List /></el-icon>
						擅长领域管理</el-menu-item>
					<el-menu-item index="Feeclassification">
						<el-icon><List /></el-icon>
						收费分类管理</el-menu-item>
					<el-menu-item index="ChargingStandards">
						<el-icon><List /></el-icon>
						收费标准管理</el-menu-item>
					<el-menu-item index="MessageManagement">
						<el-icon><List /></el-icon>
						留言管理</el-menu-item>
					<el-menu-item index="appraise">
						<el-icon><List /></el-icon>
						评价管理</el-menu-item>
					<el-menu-item index="OrderManagement">
						<el-icon><List /></el-icon>
						订单管理</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="4">
					<template #title>
						<el-icon><Grid /></el-icon>
						<span>内容管理</span>
					</template>
					<el-menu-item index="ArticleClassification">
						<el-icon><Guide /></el-icon>
						文章分类管理</el-menu-item>
					<el-menu-item index="ArticleManagement">
						<el-icon><List /></el-icon>
						文章管理</el-menu-item>
					<el-menu-item index="FMclassification">
						<el-icon><Guide /></el-icon>
						FM分类管理</el-menu-item>
					<el-menu-item index="FMmanagement">
						<el-icon><List /></el-icon>
						FM管理</el-menu-item>
					<el-menu-item index="PublicWelfareCenter">
						<el-icon><HomeFilled /></el-icon>
						公益中心管理</el-menu-item>
					<el-menu-item index="PsychologicalKnowledge">
						<el-icon><List /></el-icon>
						心理知识管理</el-menu-item>
						<el-menu-item index="ArticleRecycleBin">
							<el-icon><DeleteFilled /></el-icon>
							文章回收站</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="5">
					<template #title>
						<el-icon><LocationFilled /></el-icon>
						<span>心理测评管理</span>
					</template>
					<el-menu-item index="AC">
						<el-icon><List /></el-icon>
						心理测评管理</el-menu-item>
					<el-menu-item index="PM">
						<el-icon><Guide /></el-icon>
						测评分类管理</el-menu-item>
					<el-menu-item index="QuestionBank">
						<el-icon><List /></el-icon>
						测评题库管理</el-menu-item>
					<el-menu-item index="Results">
						<el-icon><Guide /></el-icon>
						测评结果管理</el-menu-item>
				</el-sub-menu>
				<el-sub-menu index="6">
					<template #title>
						<el-icon><LocationFilled /></el-icon>
						<span>心理答疑管理</span>
					</template>
					<el-menu-item index="Problem">
						<el-icon><QuestionFilled /></el-icon>
						问题管理</el-menu-item>
					<el-menu-item index="Reply">
						<el-icon><Comment /></el-icon>
						回复管理</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="manage">
					<el-icon><Setting /></el-icon>
					<span>咨询预约管理</span>
				</el-menu-item>
				<el-menu-item index="ConsultingAnnouncement">
					<el-icon><Setting /></el-icon>
					<span>咨询公告管理</span>
				</el-menu-item>
				<el-menu-item index="page">
					<el-icon><Setting /></el-icon>
					<span>积分管理</span>
				</el-menu-item>
				<!-- <el-menu-item index="test">
					<el-icon><Setting /></el-icon>
					<span>富文本编辑器测试</span>
				</el-menu-item> -->
			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
				<div class="header-left">
					<el-icon>
						<Fold />
					</el-icon>
				</div>
				<div class="header-right">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							<img src="../assets/avatar.jpg" alt="">
							<span>欢迎您，{{ counter.userInfo.username  }}</span>
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="b">个人中心</el-dropdown-item>
								<el-dropdown-item command="c">修改资料</el-dropdown-item>
								<el-dropdown-item command="d">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<!-- <div>1</div> -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
	import {
		Document,
		Menu as IconMenu,
		LocationFilled,
		Operation,
		Fold,
		ArrowDown,
		Phone,
		Grid,
		HomeFilled,
		List,
		Guide,
		QuestionFilled,
		Comment,
		Setting,
		OfficeBuilding,
		ShoppingCart,
		MessageBox,
		Flag,
		Management,
		VideoCameraFilled,
		GoodsFilled,
		DeleteFilled
	} from '@element-plus/icons-vue'
import { onMounted, ref,reactive } from 'vue';
	import { useRouter } from 'vue-router'
	import { useUserStore } from '@/stores/counter';
	const counter = useUserStore();
	const router = useRouter();
	
	onMounted(() => {
	})
	const logout = () => {
		// localStorage.removeItem('counter')
		counter.clearUserInfo()
		router.replace('/login');
	}
	const handleCommand = (command) => {
		if (command == 'd') {
			logout()
		}
	}
	onMounted(()=>{
		console.log();
	})
</script>


<style scoped>
	.el-menu {
		border: none !important;
	}

	.el-container {
		height: 100vh;
	}

	.el-aside {
		width: 240px !important;
		background-color: #304156;
		height: 100%;
		overflow: hidden;
	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}

	.header-left {
		float: left;
	}

	.header-left .el-icon {
		font-size: 26px;
		padding-top: 17px;
		cursor: pointer;
	}

	.el-dropdown-link {
		cursor: pointer;
		/* 解决外轮廓问题 */
		outline: none;
	}

	.header-right {
		float: right;
		line-height: 60px;
	}

	.header-right img {
		height: 50px;
		vertical-align: middle;
		margin-top: 5px;
		border-radius: 25px;
	}
</style>